import { useEffect, useRef, useState } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import { Upload, message, Image, Input } from 'antd'
import './index.less'
import { importBlobImg } from '@/api'
const getBase64 = (file: any) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })

const UploadComponent = (props: any) => {
  const [previewImage, setPreviewImage] = useState('')
  const [previewOpen, setPreviewOpen] = useState(false)
  const [fileList, setFileList] = useState<any[]>([])
  const [inputValue, setinputValue] = useState<string>('')
  useEffect(() => {
    if (props.value && typeof props.value === 'string') {
      setFileList(props.value.split(',')?.map((item: string) => ({ url: item })))
    } else {
      setFileList([])
    }
  }, [props.value])

  const handlePreview = async (file: any) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj)
    }
    setPreviewImage(file.url || file.preview)
    setPreviewOpen(true)
  }

  const handleChange = (info: any) => {
    const { fileList: newFileList } = info
    setFileList(newFileList)
    if (info?.file?.response?.code === 402) {
      message.error(info?.file?.response?.message)
      setTimeout(() => {
        setFileList(newFileList.slice(0, newFileList.length - 1))
      }, 500)
    } else {
      if (info.file.status === 'done') {
        setFileList(newFileList)
        const url = newFileList?.map((item: any) => item?.response?.data?.linkUrl || item?.url).join(',')
        props.onChange(url)
      }
    }
  }

  const handleOnRemove = (file: any) => {
    const newFileList = fileList?.filter((item: any) => item.uid !== file.uid)
    setFileList(newFileList)
    const url = newFileList?.map((item: any) => item?.response?.data?.linkUrl || item?.url).join(',')
    props.onChange(url)
  }

  const uploadButton = (
    <div>
      <PlusOutlined style={{ color: '#999' }} />
      <div
        style={{
          marginTop: 8,
          color: '#999',
        }}
      >
        图片上传
      </div>
    </div>
  )
  return (
    <div className="qsf_customupload_wrap">
      <div>
        <Upload
          action={`/api/sop/sop/file/upload`}
          listType="picture-card"
          fileList={fileList}
          onPreview={handlePreview}
          onChange={handleChange}
          onRemove={handleOnRemove}
          disabled={!!props.disabled}
          accept={props.accept ? props.accept : 'image/*'}
          maxCount={props.max || 1}
        >
          {props.disabled ? null : props.max ? (fileList.length >= props.max ? null : uploadButton) : uploadButton}
        </Upload>
        {previewImage && (
          <Image
            wrapperStyle={{
              display: 'none',
            }}
            preview={{
              visible: previewOpen,
              onVisibleChange: (visible) => setPreviewOpen(visible),
              afterOpenChange: (visible) => !visible && setPreviewImage(''),
            }}
            src={previewImage}
          />
        )}
        {props.disabled && fileList.length === 0 ? <div style={{ color: '#999' }}>暂无图片</div> : ''}
      </div>
      {props?.showPaste && !props?.disabled && (
        <div>
          <Input
            value={inputValue}
            onChange={(event) => setinputValue(event.target.value)}
            placeholder="粘贴图片到这里进行上传..."
            style={{ boxShadow: 'none', borderRadius: 'none', minWidth: 200 }}
            onPaste={async (event: any) => {
              const items = (event?.clipboardData || event?.originalEvent?.clipboardData)?.items
              let hasImage = false
              for (const item of items) {
                if (item?.type?.indexOf('image') === 0) {
                  hasImage = true
                  const blob = item?.getAsFile()
                  if (blob?.size > 1024 * 1024 * 10) {
                    message.warning('图片大小不能超过10MB！')
                    return
                  }
                  const imgdata = await importBlobImg(blob)
                  if (imgdata?.code === 200 && imgdata?.data?.linkUrl) {
                    fileList.push({ url: imgdata?.data?.linkUrl })
                    const newfileList = fileList.slice(-(props.max || 1))
                    setFileList([...newfileList])
                    const url = newfileList?.map((item: any) => item?.response?.data?.linkUrl || item?.url).join(',')
                    props.onChange(url)
                    setinputValue('')
                  }
                }
              }
              if (!hasImage) {
                setTimeout(() => {
                  setinputValue('')
                }, 500)
                message.warning('上传失败，粘贴内容不是图片！')
              }
            }}
          ></Input>
        </div>
      )}
    </div>
  )
}

export default UploadComponent
